<template>
    <transition name="showbox">
    <div class="showairticle" v-show="showflag">
        <div class="close" @click="close">
            X
        </div>
       <div class="box">
            <div class="top">
                <div class="info">
                    <div class="head">
                        <h1>{{selectairticle.title}}</h1>
                        <p class="type" v-if="!(mytype == 'techology')">{{(selectairticle.type == "1" ? '文章' : '' )+'/'+selectairticle.include}}</p>
                        <p class="type" v-if="(mytype == 'techology')">{{selectairticle.type}} </p>
                        <div class="timeinfo">
                            <div>
                                <span>{{gettime(selectairticle.time)}}</span>
                            </div>
                            <div>
                                <i class="icon-dianzan"></i>
                                <span>{{selectairticle.goods}}</span>
                                <i class="icon-yanjing"></i>
                                <span>{{selectairticle.watches}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="mycontainer" v-html="selectairticle.container">
                            <!-- {{selectairticle.container}} -->
                        </div>
                        <div class="myimages" v-lazy:background-image="selectairticle.imgurl"  v-if="!(mytype == 'techology')">

                        </div>
                        <div class="mytotalinfo" v-if="!(mytype == 'techology')">
                            {{selectairticle.totalinfo}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="foot">
                <div class="icon-dianzan logo"></div>
                <div class="title">{{selectairticle.title}}</div>
            </div>
            <div class="comment">
                <div class="info">
                    <div class="left">
                        <div class="div">
                            <div class="topitem">
                                <img v-lazy="userimg" alt="" srcset="">
                                <div class="input">
                                    <!-- <textarea name="" id=""  ></textarea> -->
                                    <el-input
                                        type="textarea"
                                        placeholder="请输入内容"
                                        v-model="commentvalue"
                                        maxlength="120"
                                        :rows="4"
                                        show-word-limit
                                        resize = "none"
                                        class="inputbox"
                                    >
                                    </el-input>
                                    <div class="upload" @click="uploadcomment">提交</div>
                                </div>
                            </div>
                            <div class="item" v-for="(item,index) in comments" :key="index">
                                <img v-lazy="item.imgurl" alt="" srcset="">
                                <div class="commentinfo">
                                    <div class="name">{{item.name}}</div>
                                    <div class="detail">
                                        {{item.container}}
                                    </div>
                                    <div class="commentfoot">
                                        <div>
                                        <span>{{gettime(item.time)}}</span>
                                        </div>
                                        <div>
                                        <i class="icon-dianzan" @click.stop="commentgood(item)" :class="{active:item.mygood}"></i>
                                        <span>{{item.goods}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>                     
                    </div>
                    <div class="right"  v-if="!(mytype == 'techology')">
                        <h1>文章</h1>
                        <div class="item" v-for="(item,index) in airticle" :key="index" @click="showdetail(item)">
                            <div class="left"  v-lazy:background-image="item.imgurl" >
                                
                            </div>
                            <div class="right">
                                <h3>
                                    {{item.title}}
                                </h3>
                                <div class="mid">
                                    {{item.container}}
                                </div>
                                <div class="foot">
                                    <div>
                                        <span>{{(item.type == "1" ? '文章' : '' )+'/'+item.include}}</span>
                                        <span>{{gettime(item.time)}}</span>
                                    </div>
                                    <div>
                                        <i class="icon-dianzan"></i>
                                        <span>{{item.goods}}</span>
                                        <i class="icon-yanjing"></i>
                                        <span>{{item.watches}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
       </div>
    </div>
    </transition>
</template>

<script>
import * as myfunc from "../../commom/js/myfunc";
export default {
    data(){
        return{
            showflag:false,
            commentvalue:'',
            comments:[],
            selectairticle:{},
            userimg:''
        }
    },
    props:{
        eachairticle:{
            type:Object,
            default:{}
        },
        airticle:{
            type:Array,
            default:[]
        },
        mytype:{
            type:String,
            default:''
        },
        
    },
    created(){
       this.isshowlogin()
    },
    watch:{
        eachairticle(newval,oldval){
            this.selectairticle = newval;
            this.showcomments();
        }
    },
    methods:{
        isshowlogin(){//根据本地缓存判断用户是否登录过或还是处于未注册状态
            let value = myfunc.getlocalstorage();
            if(JSON.stringify(value) == "{}"){//本地缓存为空
                this.userimg= this.serverurl+"userimage/default.png";
            }else{
                this.userimg= this.serverurl+"userimage/"+value.imgurl;
            }
        },
        commentgood(item){//添加评论点赞
            let value = myfunc.getlocalstorage();
            let options = {
                aid:item._id,
                uid:value._id,
                good:!item.mygood
            };
            item.mygood = !item.mygood
            if(item.mygood){
                item.goods = item.goods + 1;
            }else{
                item.goods = item.goods - 1;
            }
            this.$http.post(this.serverurl+'goods/comment',options).then((result)=>{
                let info = result.body;
                if(info.status == 200){
                let value = ""
                if(item.mygood){
                    value = "点赞"
                    }else{
                    value = "取消点赞"
                    }
                this.$notify({
                    title: '成功',
                    message: value,
                    type: 'success'
                });
                }
            },(err)=>{
                this.$notify({
                    title: '失败',
                    message: '点赞',
                    type: 'error'
                });
            })
        },
        showdetail(item){
            this.selectairticle = item;
            this.showcomments();
        },
        showcomments(){//展示评论
            let value = myfunc.getlocalstorage();
            let options = {
                aid:this.selectairticle._id,
                uid:value._id,
            }
            this.$http.post(this.serverurl+'comment/show',options).then((result)=>{
                let info = result.body;
                if(info.status == 200){
                    let list = info.data.map((item)=>{
                        item.imgurl = this.serverurl+'userimage/'+item.imgurl;
                        return item
                    })
                    this.comments =list;
                    console.log(this.comments)
                }
            },(err)=>{
                console.log(err)
            })
        },
        uploadcomment(){//提交评论
            let value = myfunc.getlocalstorage();
            let options = {
                aid:this.selectairticle._id,
                uid:value._id,
                container:this.commentvalue,
            }
            this.$http.post(this.serverurl+'comment/add',options).then((result)=>{
                let info = result.body;
                if(info.status == 200){
                   this.$notify({
                        title: '成功',
                        message: '评论成功',
                        type: 'success'
                    });
                    this.showcomments();
                }
            },(err)=>{
                console.log(err)
            })
        },
        open(){
            this.showflag = true;
        },
        close(){
            this.showflag = false;
        },
        gettime(time){
            let d = new Date(time)
            let D = d.getDate();
            let M = d.getMonth() + 1;
            let Y = d.getFullYear();
            let h = d.getHours();
            let m = d.getMinutes();
            
            let n = new Date()
            let nD = n.getDate();
            let nM = n.getMonth() + 1;
            let nY = n.getFullYear();
            let nh = n.getHours();
            let nm = n.getMinutes();
            if(h< 10){
                h = '0'+h
            }
            if(m<10){
                m = '0'+m
            }
            if(D == nD && M == nM && Y == nY){
                return `${h}:${m}`
            }else if( M == nM && Y == nY && nD-D ==1){
                return `昨天${h}:${m}`
            }else{
                return ` ${Y}/${M}/${D} ${h}:${m}`
            }
        }
    }
}
</script>

<style lang="less" scoped>
.showairticle{
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 2rem 1rem;
    overflow-y:scroll;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
        width: 0 !important;
    }
    .close{
        position: absolute;
        cursor: pointer;
        left: 90%;
        top: 5%;
        transform: translate3d(0,0,0);
        width: 4rem;
        border-radius: 50%;
        text-align: center;
        line-height: 4.2rem;
        height: 4rem;
        font-size: 2rem;
        background-color: #fff;
        color:black;
    }
    .box{
        .top{
            width: 100%;
            height: 85%;
            .info{
                width: 60%;
                height: 100%;
                margin: 0 auto;
                background-color: #F5F5F5;
                border-top-left-radius: 1.5rem;
                border-top-right-radius: 1.5rem;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                .head{
                    padding: 1rem;
                    background-color: #fff;
                    h1{
                        font-size: 2rem;
                        color: rgba(16, 16, 16, 100);
                        font-weight: bold;
                        line-height: 2rem;
                        margin-bottom: 1rem;
                    }
                    .type{
                        color: #9e9e9e;
                        font-size: 1.2rem;
                        text-align: left;
                        font-family: SourceHanSansSC-regular;
                        margin-bottom: 1rem;
                    }
                    .timeinfo{
                        display: flex;
                        justify-content: space-between;
                        color: rgba(158, 158, 158, 100);
                        font-size: 1.2rem;
                        text-align: left;
                        font-family: SourceHanSansSC-regular;
                    }
                }
                .container{
                    padding: 1rem 0rem;
                    .mycontainer{
                        padding: 0rem 1rem;
                        text-align: left;
                        color: rgb(78, 77, 77);
                        font-size: 1.4rem;
                        line-height: 2rem;
                        font-family: SourceHanSansSC-regular;
                        margin-bottom: 1rem;
                    }
                    .myimages{
                        width: 100%;
                        height: 50rem;
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center center;
                        margin-bottom: 1rem;
                    }
                    .mytotalinfo{
                        padding: 0rem 1rem;
                        text-align: center;
                        color: rgb(78, 77, 77);
                        font-size: 1.4rem;
                        line-height: 2rem;
                        font-family: SourceHanSansSC-regular;
                    }
                }
            }
        }
        .foot{
            width: 100%;
            padding: 1rem 0rem;
            .logo{
                cursor: pointer;
                margin: 0 auto;
                width: 4rem;
                height: 4rem;
                border-radius: 100%;
                background-color: #007AFF;
                text-align: center;
                line-height: 4rem;
                font-size: 2rem;
                color: #fff;
            }
            .title{
                text-align: center;
                font-size: 1.6rem;
                color: #fff;
                font-weight: 500;
                line-height: 4rem;
                margin-top: 1rem;
            }
        }
        .comment{
            width: 100%;
            .info{
                width: 60%;
                margin: 0 auto;
                background-color: #F5F5F5;
                border-bottom-left-radius: 1.5rem;
                border-bottom-right-radius: 1.5rem;
                overflow: hidden;
                display: flex;
                padding: 1.5rem;
                .left{
                    width: 60%;
                    padding: 1.4rem;
                    >div{
                        background-color: #fff;
                        border-radius: 1rem;
                        padding: 1rem;
                    }
                    .topitem{
                        display: flex;
                        margin-bottom: 1rem;
                        >img{
                            width: 5rem;
                            height: 5rem;
                            overflow: hidden;
                            border-radius: 100%;
                            margin-right: 1.5rem;
                        }
                        .input{
                            flex: 1;
                            .inputbox{
                                // outline: transparent;
                                // border: 0;
                                // resize: none;
                                // width: 100%;
                                // height: 8rem;
                                // border-radius: 1rem;
                                // padding: 1rem;
                                // box-sizing: border-box;
                                // color: rgba(158, 158, 158, 100);
                                // font-size: 1.4rem;
                                margin-bottom: 0.8rem;
                                // background-color: #e7e5e5;
                            }
                            .upload{
                                cursor: pointer;
                                float: right;
                                width: 13.3rem;
                                height: 3rem;
                                line-height: 3rem;
                                border-radius: 1rem;
                                background-color: rgba(0, 122, 255, 100);
                                color: rgba(255, 255, 255, 100);
                                font-size: 1.2rem;
                                text-align: center;
                                font-size: 1.4rem;
                                // margin-bottom: 1.5rem;  
                            }
                        }
                    }
                    .item{
                         display: flex;
                         margin-bottom: 1.8rem;
                         align-items: center;
                         >img{
                            width: 4rem;
                            height: 4rem;
                            overflow: hidden;
                            border-radius: 100%;
                        }
                        .commentinfo{
                            flex: 1;
                            margin-left: 2rem;
                            .name{
                                font-size: 1.4rem;
                                color: #101010;
                                font-weight: bold;
                                line-height: 2rem;
                            }
                            .detail{
                                color: #9e9e9e;
                                font-size: 1.2rem;
                                text-align: left;
                                font-family: SourceHanSansSC-regular;
                                min-height: 2rem;
                                padding: 1rem;
                            }
                            .commentfoot{
                                margin-top: 1rem;
                                display: flex;
                                justify-content: space-between;
                                color: rgba(158, 158, 158, 100);
                                font-size: 1rem;
                                text-align: left;
                                font-family: SourceHanSansSC-regular;
                                .active{
                                    font-size: 1.8rem;
                                    color: #007aff;
                                }
                            }
                        }
                    }
                }
                .right{
                    h1{
                        font-size: 2.5rem;
                        margin-bottom: 1rem;
                    }
                    flex: 1;
                    .item{
                        padding: 1rem;
                        background: #fff;
                        border-radius: 1rem;
                        display: flex;
                        margin-bottom: 2rem;
                        cursor: pointer;
                        align-items: center;
                        .left{
                            width: 10rem;
                            height: 10rem;
                            // background-image: url("../../commom/images/lizi.jpg");
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            border-radius: 1rem;
                        }
                        .right{
                            padding: 0 1.8rem;
                            display: flex;
                            flex-direction: column;
                            h3{
                                font-size: 1.8rem;
                                color: rgba(16, 16, 16, 100);
                                font-weight: bold;
                                line-height: 2rem;
                            }
                            .mid{
                                width: 100%;
                                flex: 1;
                                color: rgba(158, 158, 158, 100);
                                font-size: 1rem;
                                text-align: left;
                                font-family: SourceHanSansSC-regular;
                                padding: 1rem 0;
                                line-height: 2rem;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 3;
                                overflow: hidden;
                            }
                            .foot{
                                display: flex;
                                justify-content: space-between;
                                color: rgba(158, 158, 158, 100);
                                font-size: 1rem;
                                text-align: left;
                                font-family: SourceHanSansSC-regular;
                            }
                        }
                    }
                }
            }
        }
    }
}
.showbox-enter-active,.showbox-leave-active {
  transition: all 0.8s ease;
}
.showbox-enter, .showbox-leave-to
{
  transform: translateX(100%);
  opacity: 0;
}
</style>